<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-03-24 15:51:15
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-03-26 15:29:00
 * @FilePath: \bulletin-board\src\components\textAndCount\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    :class="[flexWrapper ? 'text-flex' : '']"
    :style="contentStyle"
    class="text-content"
  >
    <div
      class="top"
      :style="{
        color: topColor
      }"
    >
      <span :style="topStyle">{{ topText }}</span>
      <span
        v-if="!flexWrapper && topText !== '--' && bottomUnit"
        :style="topBottomStyle"
      >
        {{ bottomUnit }}
      </span>
    </div>
    <div :style="bottomStyle" class="bottom">{{ bottomText }}</div>
  </div>
</template>

<script>
export default {
  props: {
    topColor: {
      type: String,
      default: () => '#ffffff'
    },
    topStyle: {
      type: Object,
      default: () => {
        return {
          fontSize: '24.0px',
          color: '#2B4054',
          fontWeight: 'bold'
        }
      }
    },
    topBottomStyle: {
      type: Object,
      default: () => {
        return {
          fontSize: '12.0px',
          color: '#fdc748'
        }
      }
    },
    bottomStyle: {
      type: Object,
      default: () => {
        return {
          fontSize: '18.0px',
          color: '#2B4054'
        }
      }
    },
    flexWrapper: {
      type: Boolean,
      default: () => false
    },

    contentStyle: {
      type: Object,
      default: () => {}
    },
    topText: {
      type: String,
      default: () => '--'
    },
    bottomText: {
      type: String,
      default: () => '政务外网覆盖量'
    },
    bottomUnit: {
      type: String,
      default: () => ''
    }
  }
}
</script>
<style lang="scss" scoped>
.text-flex {
  display: flex;
  align-items: center;
  .bottom {
    margin-top: 0px !important;
    margin-left: 10px;
  }
}
.text-content {
  .top {
    text-align: center;
  }
  .bottom {
    text-align: center;
    margin-top: 10px;
  }
}
</style>
